<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网格专题图</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="language,echarts" src="./static/libs/include-mapboxgl-local.js"></script>
    <script src="../../../../../static/data/echarts/griddata.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
    <script>
        //一定要去mapbox注册一个key,这个key会失效的
        mapboxgl.accessToken =
            'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
        var map = new mapboxgl.Map({
            container: 'map', // 绑定div
            style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
            center: [116, 40],
            zoom: 9
        });

        map.addControl(new MapboxLanguage(), 'top-right'); //中文支持

        //注册鼠标移动事件
        map.on('mousemove', function (e) {
            //经纬度坐标转web墨卡托
            const earthRad = 6378137.0;
            const x = e.lngLat.lng * Math.PI / 180 * earthRad;
            const a = e.lngLat.lat * Math.PI / 180;
            const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
            document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
        });

        var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];
        var lngExtent = [39.5, 40.6];
        var latExtent = [115.9, 116.8];
        var cellCount = [50, 50];
        var cellSizeCoord = [
            (lngExtent[1] - lngExtent[0]) / cellCount[0],
            (latExtent[1] - latExtent[0]) / cellCount[1]
        ];
        var gapSize = 0;

        function renderItemFunc(params, api) {
            var context = params.context;
            var lngIndex = api.value(0);
            var latIndex = api.value(1);
            var coordLeftTop = [+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6), +(lngExtent[0] + latIndex *
                cellSizeCoord[1]).toFixed(6)];
            var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
            var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);

            return {
                type: 'rect',
                shape: {
                    x: pointLeftTop[0],
                    y: pointLeftTop[1],
                    width: pointRightBottom[0] - pointLeftTop[0],
                    height: pointRightBottom[1] - pointLeftTop[1]
                },
                style: api.style({
                    stroke: 'rgba(0,0,0,0.1)'
                }),
                styleEmphasis: api.styleEmphasis()
            };
        }

        function getCoord(params, api, lngIndex, latIndex) {
            var coords = params.context.coords || (params.context.coords = []);
            var key = lngIndex + '-' + latIndex;

            // bmap returns point in integer, which makes cell width unstable.
            // So we have to use right bottom point.
            return coords[key] || (coords[key] = api.coord([+(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6), +
                (lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
            ]));
        }

        updateView();

        function updateView() {
            var option = {
                tooltip: {},
                visualMap: {
                    type: 'piecewise',
                    inverse: true,
                    top: 10,
                    left: 10,
                    pieces: [{
                        value: 0,
                        color: COLORS[0]
                    }, {
                        value: 1,
                        color: COLORS[1]
                    }, {
                        value: 2,
                        color: COLORS[2]
                    }, {
                        value: 3,
                        color: COLORS[3]
                    }, {
                        value: 4,
                        color: COLORS[4]
                    }, {
                        value: 5,
                        color: COLORS[5]
                    }],
                    borderColor: '#ccc',
                    borderWidth: 1,
                    backgroundColor: '#eee',
                    dimension: 2,
                    inRange: {
                        color: COLORS,
                        opacity: 0.8
                    }
                },
                mapboxgl: {
                    roam: true
                },
                geo: {
                    geoIndex: 0
                },
                series: [{
                    type: 'custom',
                    coordinateSystem: 'mapboxgl',
                    data: griddata,
                    renderItem: renderItemFunc,
                    animation: false,
                    itemStyle: {
                        emphasis: {
                            color: 'yellow'
                        }
                    },
                    encode: {
                        tooltip: 2
                    }
                }]
            };

            layer = new mapboxgl.zondy.EchartsLayer(map, option).addTo(map);
        }
    </script>


</body>

</html>